<app-monitor-control></app-monitor-control>
<tabset #tabs>
  <tab heading="Simple">
    <ng-container *ngIf="tabs.tabs[0].active">
      <app-observable-monitor name="interval" [observable]="interval$"></app-observable-monitor>
      <app-observable-monitor name="take" [observable]="take$"></app-observable-monitor>
      <app-observable-monitor name="startWith" [observable]="startWith$"></app-observable-monitor>
      <app-observable-monitor name="delay" [observable]="delay$"></app-observable-monitor>
    </ng-container>
  </tab>
  <tab heading="Distinct">
    <ng-container *ngIf="tabs.tabs[1].active">
      <app-observable-monitor name="circulateInterval" [observable]="circulateInterval$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="distinct" [observable]="distinct$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="distinctUntilChange" [observable]="distinctUntilChange$" [autoSub]="autoSub"></app-observable-monitor>
    </ng-container>
  </tab>
  <tab heading="TakeUntil">
    <ng-container *ngIf="tabs.tabs[2].active">
      <app-observable-monitor name="interval" [observable]="interval$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="sign" [observable]="takeUntilSign$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="takeUntil" [observable]="takeUntil$" [autoSub]="autoSub"></app-observable-monitor>
    </ng-container>
  </tab>
  <tab heading="Order">
    <ng-container *ngIf="tabs.tabs[3].active">
      <app-observable-monitor name="take" [observable]="take$"></app-observable-monitor>
      <app-observable-monitor name="delay before startWith" [observable]="delayFirst$"></app-observable-monitor>
      <app-observable-monitor name="startWith before delay" [observable]="startWithFirst$"></app-observable-monitor>
    </ng-container>
  </tab>
  <tab heading="Map">
    <ng-container *ngIf="tabs.tabs[4].active">
      <app-observable-monitor name="interval" [observable]="interval$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="map" [observable]="map$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="mapTo" [observable]="mapTo$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="pluck" [observable]="pluck$" [autoSub]="autoSub"></app-observable-monitor>
    </ng-container>
  </tab>
  <tab heading="Reduce">
    <ng-container *ngIf="tabs.tabs[5].active">
      <app-observable-monitor name="take" [observable]="take$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="reduce" [observable]="reduce$" [autoSub]="autoSub"></app-observable-monitor>
      <app-observable-monitor name="scan" [observable]="scan$" [autoSub]="autoSub"></app-observable-monitor>
    </ng-container>
  </tab>
</tabset>
